<template>
  <div class="periphery">
    <div class="top">
      <h3 style="margin-left:-25px;">交通及周边配套</h3>
    </div>
    <div>
      <div id="secondmap" v-if="gps">
        <baidu-map :zoom="14" class="map" style="height:100%;" :center="gps">
          <bm-view style="width: 100%; height:100%;"></bm-view>
          <bm-marker :position="gps">
            <bm-label :content="buildingName" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -15, height: 30}"/>
          </bm-marker>
        </baidu-map>
      </div>
    </div>
    <a href="javascript:void(0)" @tap='toMap' style="display: block;width: 100%">
      <img style="display: block;width: 100%" :src="imgSrc" id="tomap" alt="" />
    </a>
  </div>
</template>
<script>
export default {
  props: ['buildingName', 'gps'],
  data() {
    return {
      imgSrc: '../images/house_detail_suppert.png',
      permitClick: true
    }
  },
  methods: {
    toMap: function() {
      if (!this.permitClick) {
        return false
      }
      this.permitClick = false
      const titleViewStyle = {
      titleNView: {
        backgroundColor: '#ffffff', //导航栏背景色
        titleText: this.buildingName, //导航栏标题 Vuehouse.list.title
        titleColor: '#333333', //文字颜色
        type: 'default', // 默认样式样式
        autoBackButton: true, //自动绘制返回箭头
        splitLine: { //底部分割线
          color: '#efefef'
        }
      }
    }
      var webview_building = plus.webview.create( 'map.html', 'map.html', titleViewStyle, {gps: this.gps, buildingName: this.buildingName} )
      var self = this
      setTimeout(function () {
        webview_building.show("slide-in-right", 300)
        setTimeout(function() {
          self.permitClick = true
        }, 300)
      }, 150)
    }
  }
}
</script>

